<template>
  <div class="wrap">
    <div class="attention">
      <!-- 歌手页面关注歌手 -->
      <!-- <Banner /> -->
      <!-- 没登录就显示这个 -->
      <div class="context-inner">
        <h2 class="inner-one">
          <span class="text-first">万千歌手 尽在眼前</span>
        </h2>
        <div class="inner-two">
          <span class="text-two">登录查看你的歌手</span>
        </div>
        <button class="singer-btn">
          <span class="btn-login">立即登录</span>
        </button>
      </div>
    </div>
    <!-- 歌手页面歌手类型 -->
    <SingerType :singerType="singerType" />
    <!-- 歌手页面歌手图片 -->
    <SingerPhoto :singerList="singerList" />
    <!-- 歌手页面歌手名字 -->
    <SingerName />
  </div>
</template>

<script lang="ts">
export default {
  name: 'MusicSinger',
}
</script>
<script lang="ts" setup>
import SingerType from './components/SingerType/index.vue'
import SingerPhoto from './components/SingerPhoto/index.vue'
import SingerName from './components/SingerName/index.vue'
// import { getSongListsApi } from '@/api/testApi'
// import Banner from './components/Banner/index.vue'
import { ref, onMounted, reactive } from 'vue'
import { getSingerApi } from '@/api/singer/getSingerList'
import type {
  SingerAreaList,
  SingerTypeList,
  SingerList,
} from '@/api/singer/model/singerModel'
const singerType = reactive<SingerAreaList>({
  area: [],
  genre: [],
  index: [],
  sex: [],
})
const singerList = ref<SingerList>([])
onMounted(async () => {
  const result = await getSingerApi()
  // console.log(result)

  // console.log(result.singerList.data.tags)
  singerType.area = result.singerList.data.tags.area
  singerType.genre = result.singerList.data.tags.genre
  singerType.index = result.singerList.data.tags.index
  singerType.sex = result.singerList.data.tags.sex

  singerList.value = result.singerList.data.singerlist
})

const getSingerId = () => {}
</script>

<style scoped>
.wrap {
  background-color: #fafafa;
}
.attention {
  width: 100%;
  height: 376px;
  background-image: url('https://y.qq.com/ryqq/static/media/bg_singer.0ba4a7af.jpg?max_age=2592000');
}
/* 没有登录显示 */
.context-inner {
  margin: 0 auto;
  text-align: center;
}
.inner-one {
  font-size: 60px;
  font-weight: 200;
}
.text-first {
  display: inline-block;
  margin-top: 103px;
  color: #fff;
}
.singer-btn {
  border: 1px solid #4e4e4e;
  width: 174px;
  height: 48px;
  background-color: transparent;
  line-height: 24px;
  margin-top: 20px;
}
.text-two {
  display: inline-block;
  font-size: 25px;
  color: #e2e2e2;
  margin-top: 10px;
}
.btn-login {
  display: inline-block;
  color: #fff;
  font-size: 18px;
}
.singer-btn:hover {
  border-color: #fff;
}
</style>
